define(['gitee', 'utils', 'require'], function (gitee, utils, require) {
    const codeStorageKey = 'public-jsrun-code';
    let editor;
    return {
        name: "jsrun",
        data() {
            return {
                theme: "vs-dark",
                output: [],
                utils,
                gitee
            }
        },
        methods: {
            log(data) {
                this.output.unshift(JSON.stringify(data, null, 4));
            },
            runjs() {
                let selectionTxt = editor.getModel().getValueInRange(editor.getSelection());
                let value = editor.getValue();
                localStorage.setItem(codeStorageKey, value);
                if (selectionTxt) {
                    value = selectionTxt;
                }
                // 在当前上下文运行编辑器js代码
                eval(value);

            },
            changeTheme() {
                this.theme = this.theme === 'vs' ? 'vs-dark' : 'vs';
                monaco.editor.setTheme(this.theme);
            },
            saveFile() {
                utils.prompt('请输入文件名', '保存到Git文件', {
                    inputPattern: /^[\w]+$/,
                    inputErrorMessage: '格式不正确'
                }).then(({ value }) => {
                    gitee.newFile(`jsrun/${value}.js`, editor.getValue());
                }).catch(() => {

                });
            }
        },
        mounted() {
            require(['vs/editor/editor.main'], () => {
                let cacheCode = localStorage.getItem(codeStorageKey);;
                editor = monaco.editor.create(document.getElementById('editor-container'), {
                    value: cacheCode ? cacheCode : 'this.log("start js run ...");',
                    language: "javascript",
                    theme: this.theme,
                    automaticLayout: true,
                    padding: { top: 12 }
                });
                editor.focus();
                editor.addAction({
                    id: `yh-editor-jsrun`,
                    label: 'run js',
                    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
                    precondition: null,
                    keybindingContext: null,
                    contextMenuGroupId: 'yh-editor',
                    contextMenuOrder: 1.5,
                    run: this.runjs
                });
            });
            document.querySelectorAll("div#jsrun_btns [data-bs-toggle='tooltip']").forEach(ele => new bootstrap.Tooltip(ele));
            gitee.loginStateInit();
        },
        template: /*html*/`
        <div class="container-fluid mt-3 row">
            <div class="col-md-3 col-xl-2 d-flex flex-column px-2" id="jsrun_btns">
                <p>
                    <button type="button" class="btn btn-primary" @click="runjs">运行JS</button>
                    <button type="button" class="btn btn-primary my-2" @click="changeTheme">切换主题 {{theme}}</button>
                    <button type="button" class="btn btn-primary my-2" @click="saveFile">保存文件</button>
                </p>
                <p>
                    <div class="alert alert-dismissible alert-secondary">
                        <div class="mb-2"><b>常用快捷键</b></div>
                        <ul>
                            <li><small>Ctrl+S 运行JS</small></li>
                            <li><small>Ctrl+X 剪切行</small></li>
                            <li><small>Alt+↑/↓ 移动行</small></li>
                            <li><small>Ctrl+Enter 跳转下一行开头</small></li>
                            <li><small>Alt+Shift+F 格式化</small></li>
                            <li><small>Ctrl+D 选中下一个匹配字符</small></li>
                        </ul>

                        <div class="mb-2"><b>操作说明</b></div>
                        <ul>
                            <li><small>在JS中调用this.log(obj)方法可在右侧格式化输出对象</small></li>
                            <li><small>默认运行编辑框所有js,也可选中指定js片段运行</small></li>
                        </ul>
                    </div>
                </p>
            </div>
            <div id="editor-container" style="height: calc(100vh - 106px)" class="col-md-6 col-xl-8"></div>
            <div class="col-md-3 col-xl-2 overflow-auto" style="height: calc(100vh - 106px)">
                <div class="mb-2"><b>运行日志</b><small> this.log(输出对象)</small></div>
                <div class="alert alert-dismissible alert-secondary" v-for="content in output">
                    <pre v-html="content"></pre>
                </div>
            </div>
        </div> 
    `
    };

});